import { useRoutes, BrowserRouter } from "react-router-dom";
// import GetRouters from "./router";
import AuthRouter from "./components/authRouter";
import Spinner from "./components/spinner";
import { connect } from 'react-redux'
import { GlobalTypes } from "./redux/modules/type";
import { useEffect, useState } from "react";
import { IRoute, flatAsyncRoutes, loadComponent } from "./router/dealRoute";
import { routerItems } from "./router";
import { ConfigProvider } from 'antd'
import { lightOptions } from "./styles/theme/light";
import { defaultOptions } from './styles/theme/default'
import { initTheme } from "./styles/theme";

function App(props: { loading: any; resetLoading: any; flatRoutes: any; theme: any; }) {
    let { loading, resetLoading, flatRoutes, theme } = props;
    let [pageLoading, setPageLoading] = useState<boolean>(true);
    let [currentRoutes, setCurrentRoutes] = useState<Array<IRoute>>();
    let [currentTheme, setCurrentTheme] = useState<object>(defaultOptions)

    useEffect(() => {
        resetLoading();
    }, []);
    //主题切换
    useEffect(() => {
        if (theme == 'light') {
            setCurrentTheme(lightOptions)
        } else {
            setCurrentTheme(defaultOptions)
        }
        initTheme(theme)
    }, [theme]);

    //处理动态路由
    useEffect(() => {
        dealLayoutRoutes(flatRoutes);
    }, [flatRoutes]);
    const dealLayoutRoutes = (routes: Array<IRoute>) => {
        routes.map((item) => {
            return item.element = loadComponent(item.path, item.menutype);
        })
        setCurrentRoutes(routes)
        setPageLoading(false)
    }
    const RouteElement = (props: { routes?: Array<IRoute>; }) => {
        let getRoutes = routerItems(props.routes);
        let element = useRoutes(getRoutes);
        return element
    }
    return <>
        {
            pageLoading ? <Spinner text="页面加载中..." /> : (
                <ConfigProvider
                    componentSize={'middle'}
                    // theme={{
                    //     token: { ...currentTheme },
                    // }}
                >
                    <BrowserRouter>
                        {
                            loading > 0 && <Spinner text="请求数据..." />
                        }
                        <AuthRouter>
                            <RouteElement routes={currentRoutes} />
                        </AuthRouter>
                    </BrowserRouter>
                </ConfigProvider>
            )
        }

    </>;
}

const mapStateToProps = (state: { Global: { loadingCount: any; flatRoutes: any; }; Setting: { theme: any; }; }) => {
    return {
        loading: state.Global.loadingCount,
        flatRoutes: state.Global.flatRoutes,
        theme: state.Setting.theme,
    }
}

const mapDispatchToProps = (dispatch: (arg0: { type: string; }) => object) => {
    return {
        resetLoading: () => dispatch({ type: GlobalTypes.RESET_LOADING })
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);
